<template>
  <div class="menu">
    <a-menu
      :style="'width: '+menuWidth+'px;'"
      mode="inline"
      :openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      @openChange="onOpenChange"
      theme='dark'
    >
      <template v-for="item in menuList" :key="item.id">
        <a-menu-item :key="item.key" v-if="item.name == 'home'">
          <router-link :to="item.path" exact><Icon v-if="item.icon" :icon='item.icon' size='16' /><span>{{item.title}}</span></router-link>
        </a-menu-item>
        <a-sub-menu v-else :key="item.key">
          <template #title><Icon v-if="item.icon" :icon='item.icon' size='16' /><span>{{item.title}}</span></template>
          <template v-for="item2 in item.children" :key="item2.id">
            <a-sub-menu :key="item2.key" v-if="item2.children.length > 0" >
              <template #title><Icon v-if="item2.icon" :icon='item2.icon' size='16' /><span>{{item2.title}}</span></template>
              <a-menu-item v-for="item3 in item2.children" :key="item3.key">
                <router-link :to="item3.path" exact>{{item3.title}}</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item :key="item2.key" v-else>
              <router-link :to="item2.path" exact>{{item2.title}}</router-link>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs } from 'vue';
import Icon from 'components/icon'
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    
  },

  components: {
    Icon
  },

  methods:{
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      let key = []
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        key = openKeys;
      } else {
        key = latestOpenKey ? [latestOpenKey] : [];
      }
      this.$store.commit('menu/setOpenKeys',key)
    },
  },

  computed:{
    menuWidth(){
      return this.$store.state.common.menuWidth
    },
    menuList(){
      return this.$store.state.menu.menuList
    },
    rootSubmenuKeys(){
      return this.$store.state.menu.rootSubmenuKeys
    },
    openKeys(){
      return this.$store.state.menu.openKeys
    },
    selectedKeys(){
      return this.$store.state.menu.selectedKeys
    },
  }
});

</script>

<style scoped>
  
</style>